<template>
  <PageWrapper :contentFullHeight="true">
    <Card class="card">
      <a-tabs v-model:activeKey="data.activeKey" @change="handleTabChange" class="tab">
        <a-tab-pane key="SubscribeReply" tab="关注时回复" />
        <a-tab-pane key="MessageReply" tab="消息回复" force-render />
        <a-tab-pane key="KeywordReply" tab="关键词回复" />
      </a-tabs>
      <component :is="currentComponent" />
    </Card>
  </PageWrapper>
</template>

<script lang="ts" name="weixin-mp-auto-reply" setup>
  import { h, onMounted, reactive, computed } from "vue"
  import { PageWrapper } from "/@/components/Page"
  import { Card } from "ant-design-vue"
  import KeywordReply from "./KeywordReply.vue"
  import MessageReply from "./MessageReply.vue"
  import SubscribeReply from "./SubscribeReply.vue"

  const data = reactive<any>({
    activeKey: "SubscribeReply",
  })

  onMounted(() => {})

  const currentComponent = computed(() => {
    const componentType = {
      KeywordReply: h(KeywordReply, { objData: {} }),
      MessageReply: h(MessageReply, { objData: {} }),
      SubscribeReply: h(SubscribeReply, { objData: {} }),
    }
    return componentType[data.activeKey]
  })

  const handleTabChange = (key) => {
    data.activeKey = key
  }
</script>

<!--本组件样式-->
<style lang="less" scoped="scoped">
  .form {
    margin-bottom: -20px;
  }

  .card {
    margin-bottom: 15px;
    .tab {
      margin-top: -20px;
    }
  }
</style>
